import React from 'react'
import { Input, Space, Radio, DatePicker } from 'antd';
import '../../../assets/css/EmployInfo/moreINfo.css'
import moment from 'moment'
function EmployInfoMore({ upInfo, onChange }) {
    const { TextArea } = Input;
    const dateFormat = 'YYYY/MM/DD';


    return (
        <div id='moreEmployInfo'>
            <div>
                <p className='w12'>身份证号</p>
                <div className='w38'><Input key={upInfo.id_number} data-key='id_number' defaultValue={upInfo.id_number} onChange={(e) => onChange(e)}></Input></div>
                <p className='w12'>入司时间</p>
                <div className='w38'>
                    <Space direction="vertical">
                        <DatePicker key={upInfo.joining_time} defaultValue={upInfo ? moment(upInfo.joining_time, dateFormat) : ''} format={dateFormat} onChange={(value, dateString) => onChange({ target: { value: dateString, dataset: { key: 'joining_time' } } })} />
                    </Space>
                </div>
            </div>
            <div>
                <p className='w12'>家乡</p>
                <div className='w38'><Input key={upInfo.hometown} data-key='hometown' defaultValue={upInfo.hometown} onChange={(e) => onChange(e)} ></Input></div>
                <p className='w12'>家庭住址</p>
                <div className='w38'>
                    <Input key={upInfo.address} data-key='address' defaultValue={upInfo.address} onChange={(e) => onChange(e)}></Input>
                </div>
            </div>
            <div>
                <p className='w12'>紧急联系人</p>
                <div className='w38'><Input key={upInfo.emergency_contact} data-key='emergency_contact' defaultValue={upInfo.emergency_contact} onChange={(e) => onChange(e)}></Input></div>
                <p className='w12'>紧急联系人电话</p>
                <div className='w38'>
                    <Input key={upInfo.emergency_phone} data-key='emergency_phone' defaultValue={upInfo.emergency_phone} onChange={(e) => onChange(e)} ></Input>
                </div>
            </div>
            <div style={{ height: '100px' }}>
                <p className='w12'>个人介绍</p>
                <div className='w88'>
                    <TextArea key={upInfo.person_introduction} data-key='person_introduction' defaultValue={upInfo.person_introduction} onChange={(e) => onChange(e)} rows={4} />
                </div>
            </div>
            <div>
                <p className='w12'>个性签名</p>
                <div className='w38'><Input key={upInfo.personal_signature} data-key='personal_signature' defaultValue={upInfo.personal_signature} onChange={(e) => onChange(e)} ></Input></div>
            </div>
            <div>
                <p className='w12'>离职状态</p>
                <div className='w38'>
                    <Radio.Group key={upInfo.personal_signature} onChange={(e) => onChange({ target: { value: e.target.value, dataset: { key: 'resignation_status' } } })} defaultValue={upInfo.resignation_status + ''}  >
                        <Radio value='2'>未离职</Radio>
                        <Radio value='1'>已离职</Radio>
                    </Radio.Group>
                </div>
                <p className='w12'>离职时间</p>
                <div className='w38'>
                    <Space direction="vertical">
                        <DatePicker key={upInfo.resignation_time} defaultValue={upInfo.resignation_time ? moment(upInfo.resignation_time, dateFormat) : ''} format={dateFormat} onChange={(value, dateString) => onChange({ target: { value: dateString, dataset: { key: 'resignation_time' } } })} />
                    </Space>
                </div>
            </div>
            <div style={{ height: '100px' }}>
                <p className='w12'>离职原因</p>
                <div className='w88'>
                    <TextArea key={upInfo.resignation_reason} data-key='resignation_reason' defaultValue={upInfo.resignation_reason} onChange={(e) => onChange(e)} rows={4} />
                </div>

            </div>
        </div>
    )
}

export default React.memo(EmployInfoMore)